<template>

	<div class="login">

		<!--    <div class="login_title" >-->
		<!--      <div class="login_title1" >-->
		<!--        <span>雇安心管理系统</span>-->
		<!--        </div>-->
		<!--    </div>-->
		<div class="login_conter">
			<div class="login_conter_top">
				<img src="../assets/images/login_title.png" height="110" width="616" />
			</div>
			<div class="login_conter_item">
				<div class="login_conter_item_left">
					<img src="../assets/images/tu1.png" />
				</div>
				<div class="login_conter_item_right">
					<div class="title">雇安心管理系统</div>
					<div class="line"></div>
					<el-form class="login-form" ref="loginForm" :model="loginForm" :rules="loginRules">
						<el-form-item prop="username">
							<div class="name">输入账号</div>
							<el-input class="input" v-model="loginForm.username" type="text" placeholder="账号" />

						</el-form-item>
						<el-form-item prop="password">
							<div class="name">输入密码</div>
							<el-input class="input" v-model="loginForm.password" type="password" placeholder="密码"
								@keyup.enter.native="handleLogin" />

						</el-form-item>
						<el-form-item prop="code">
							<div class="name">输入图形验证码</div>
							<div class="item1">
								<div class="itemson">
									<el-input class="input input1" v-model="loginForm.code" placeholder="验证码"
										 @keyup.enter.native="handleLogin">
									</el-input>
								</div>
								<div class="login-code">
									<img :src="codeUrl" @click="getCode" class="login-code-img" />
								</div>
							</div>
						</el-form-item>
						<el-button class="el-button" :loading="loading" size="medium" type="primary"
							@click.native.prevent="handleLogin">
							<span v-if="!loading">登 录</span>
							<span v-else>登 录 中...</span>
						</el-button>
					</el-form>


				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		getCodeImg,
		getCodeImg1,
		login
	} from "@/api/login";
	import Cookies from "js-cookie";
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt'

	export default {
		name: "Login",
		data() {
			return {
				codeUrl: "",
				cookiePassword: "",
				loginForm: {
					username: "",
					password: "",
					rememberMe: false,
					code: "",
					uuid: ""
				},
				loginRules: {
					username: [{
						required: true,
						trigger: "blur",
						message: "用户名不能为空"
					}],
					password: [{
						required: true,
						trigger: "blur",
						message: "密码不能为空"
					}],
					code: [{
						required: true,
						trigger: "change",
						message: "验证码不能为空"
					}]
				},
				loading: false,
				redirect: undefined
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect;
				},
				immediate: true
			}
		},
		created() {

			this.getCode();
			// this.getCookie();
		},
		methods: {

			getCode() {
				getCodeImg().then(res => {
					// console.log('验证码',res)
					this.codeUrl = "data:image/gif;base64," + res.img;
					this.loginForm.uuid = res.uuid;
					// console.log('codeUrl',this.codeUrl)
					// this.loginForm.uuid = res.uuid;
				});
				// getCodeImg1().then(res => {
				//   console.log('验证码1',res)
				//
				//   this.codeUrl = "data:image/gif;base64," + res.img;
				//   this.loginForm.uuid = res.uuid;
				// });
			},
			// getCookie() {
			//   const username = Cookies.get("username");
			//   const password = Cookies.get("password");
			//   const rememberMe = Cookies.get('rememberMe')
			//   this.loginForm = {
			//     username: username === undefined ? this.loginForm.username : username,
			//     password: password === undefined ? this.loginForm.password : decrypt(password),
			//     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
			//   };
			// },
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loading = true;
						// if (this.loginForm.rememberMe) {
						//   Cookies.set("username", this.loginForm.username, {expires: 30});
						//   Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
						//   Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
						// } else {
						//   Cookies.remove("username");
						//   Cookies.remove("password");
						//   Cookies.remove('rememberMe');
						// }
						// login(this.loginForm.username, this.loginForm.password, this.loginForm.code).then(res=>{
						//   this.loading = false;
						//   console.log('res',res)
						//   this.$router.push({
						//     path:'./index'
						//   })
						// })
						this.$store.dispatch("Login", this.loginForm).then((res) => {
							// console.log('登录成功',res)
							this.loading = false;
							// this.$router.push({path: this.redirect || "/"}).catch(() => {
							// });0

							this.$router.push({
								path: '/index' || '/'
							}).catch(() => {})
						}).catch(() => {
							this.loading = false;
							this.getCode();
						});
					} else {
						// console.log('error submit!!')
						return false
					}
				});
			}
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss">
	.login {
		height: 100%;
		//background:pink;
		background-image: url("../assets/images/bg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		overflow: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.login_conter {
			//width: 1622px;
			//height: 800px;
			width: 85%;
			height: 85%;
			box-sizing: border-box;

			background: url("../assets/images/bg_center.png") no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
			padding: 40px;

			.login_conter_top {
				img {
					width: 308px;
					height: 55px;
				}
			}

			@media (max-width: 900px) {
				.login_conter_item_left {
					flex: 2;
					min-width: 300px;
					min-height: 200px;
					display: none;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			@media (min-width:1200px) {
				.login_conter_item_left {
					flex: 2;
					min-width: 60%;
					height: 390px;

					img {
						width: 100%;
						height: 100%;
					}
				}
			}

			.login_conter_item {
				display: flex;
				//flex-flow: wrap;
				//justify-content: space-between;
				margin-left: 20px;
				box-sizing: border-box;
				//background: paleturquoise;

				.login_conter_item_left {
					//width: 965px;
					//min-height:393px;
					flex: 2;
					min-width: 500px;
					min-height: 200px;
					max-height: 70%;

					//background: pink;
					img {
						width: 100%;
						height: 100%;
					}
				}

				.login_conter_item_right {
					flex: 1;

					.title {
						//background: plum;
						width: 384px;
						height: 55px;
						font-size: 53px;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FD6905;
						line-height: 55px;
						margin-bottom: 10px;
					}

					.line {
						width: 108px;
						height: 3px;
						background: linear-gradient(90deg, #F4A223, #FF6000);
					}

					.login-form {
						//background: #42b983;
						margin-top: 20px;

						.name {
							height: 30px;
							font-size: 18px;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #A8A8A8;
							line-height: 30px;

						}

						.el-input__inner {
							border: none;
							padding: 0;
						}

						input:-webkit-autofill {
							box-shadow: 0 0 0px 1000px #FFFFFF inset !important;
						}

						.input {
							width: 80%;
							border-bottom: 1px solid #D7D7D7;
							font-size: 24px;
							font-family: Adobe Heiti Std;
							color: #484545;
						}

						.item1 {
							display: flex;
							//background: pink;
							justify-content: space-between;
							border-bottom: 1px solid #D7D7D7;
							padding-bottom: 5px;
							width: 80%;

							.itemson {
								width: 60%;

								.input1 {
									width: 100%;
									border-bottom: none;
								}
							}

							.login-code {
								width: 33%;
								height: 38px;
								float: right;
								display: flex;
								justify-content: flex-end;

								img {
									cursor: pointer;
									vertical-align: middle;
								}
							}
						}


						.el-button {
							//margin-top: 20%;
							width: 80%;
							background: linear-gradient(90deg, #F4A223, #FF6000);
							border: none;
							border-radius: 6px;
							height: 50px;
							font-size: 24px;
							font-family: Microsoft YaHei;
							font-weight: 400;

						}


					}

				}
			}

		}

	}
</style>
